<template>
	<div class="cate-tab3 swiper">
		<ol class="swiper-wrapper">
			<li v-for="( list , index ) in pages" :key="index" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<template v-if="item.id<18">
						<img :src="item.imgURL" />
						<aside>
							<h3>{{item.title}}</h3>
							<label>{{item.msg}} | <em>{{item.day}}天</em></label>
							<p>￥{{item.price}}起</p>
						</aside>
					</template>
					<template v-if="item.id>17">
						<aside>
							<h4>{{item.en}}</h4>
							<span>查看更多</span>
						</aside>
					</template>
				</router-link>
			</li>
		</ol>

	</div>
</template>

<script>
	import{mapState} from 'vuex'
	//1.引入vue周期函数
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);

	export default {
		name: "CategoryTab3",
		data() {
			return {
				tab1List: []
			}
		},
		props: ['propcategorytab3'],
		created() {
			this.tab1List = this.propcategorytab3
			
			let that = this
			this.axios.get('/api/data.json').then((res) => {
				let data = res.data.Homemsg[0];
				// 提取banner组件的数据
				for(var i in res.data.Homemsg){
					if(res.data.Homemsg[i].city==this.cityName){
						 data=res.data.Homemsg[i]
					}
					
				}
				that.tab1List = data.CategoryList.tab1List
				// console.log(that.tab1List);
			}).catch((error) => {
				console.log(error)
			})
		},
		computed: {
			// 程序将其当成是属性而不是函数，是个变量【循环/判断】
			pages() {
				let arr = []; //空数组，目的是：重组一个二维数组
				let num = 6; //每页条数
				// 将原数组遍历
				this.tab1List.forEach((item, index) => {
					// i：每页的页码
					let i = Math.floor(index / num);
					if (!arr[i]) arr[i] = [];
					arr[i].push(item);
				});
				return arr;
			},
				...mapState(['cityName'])
		},
		updated() {
			new Swiper('.cate-tab3', {
				loop: false,
				//修改swiper自己或者子元素时自动初始化swiper
				observer: true,
				//修改swiper容器，自动初始化swiper
				observerParents: true
			})
		}
	}
</script>

<style scoped>
	a{
				color:#000000;
				text-decoration: none;
			}
			.cate-tab3{
				height: 9.2rem;
			}
			.cate-tab3 ol{
				width: 100%;
				height: 90%;
			}
			.cate-tab3 ol li{
				width: 100%;
				height: 100%;
			}
			.cate-tab3 img{
				width: 90%;
				height: 2.5rem;
				border-radius: 0.2rem;
			}
			.cate-tab3 ol li a{
				margin-top: 0.15rem;
				float: left;
				width: 33%;
				margin-top: 0.5rem;
				position: relative;
			}
			.cate-tab3 aside h3{
				margin: 0.1rem;
				font-size: 0.35rem;
				font-weight: bold;
				width: 2.5rem;
			}
			.cate-tab3 aside label{
				color: white;
				position: absolute;
				top: 0.5%;
				right: 10%;
				border-radius: 0 0.2rem 0 0.2rem;
				font-size: 0.26rem;
				padding: 0.1rem;
				background-color: rgba(0, 0, 0, 0.7);
				display: -webkit-box;
				-webkit-line-clamp: 1;/*与高度有关*/
				/* 超出盒子外的文本用省略号代替 */
				-webkit-box-orient: vertical;
			}
			.cate-tab3 aside p{
				font-size: 0.3rem;
				font-weight: bold;
				color: white;
				position: absolute;
				top: 2rem;
				left: 0.2rem;
			}
			.cate-tab3 a:last-child h4
			{
				display: block;
				margin: 0.5rem auto;
				font-size: 0.3rem;
				font-weight: bold;
				text-align: center;
				width: 1.5rem;
				border-bottom: 0.2rem solid #ffd825;
			}
			.cate-tab3 a:last-child span{
				margin: 0 auto;
				display: block;
				text-align: center;
				background-color: #ffd825;
				padding: 0.1rem;
				border-radius: 0.2rem;
				width: 1.5rem;
				font-weight: bold;
			}
</style>
